<template>
	<view class="container">
		<view class="statusList">
			<view class="item active">
				今日
			</view>
			<view class="item active">
				昨日
			</view>
			<view class="item">
				本月
			</view>
			<view class="item active">
				最近30天
			</view>
		</view>
		<view class="showCaseInfo">
			<view class="item">
				<text>全部销售额</text>
				<view><text>￥</text>45.5</view>
			</view>
			<view class="item">
				<text>全部单数</text>
				<view><text>￥</text>45.5</view>
			</view>
			<view class="item">
				<text>全部佣金</text>
				<view><text>￥</text>45.5</view>
			</view>
			<view class="item">
				<text>有效销售额</text>
				<view><text>￥</text>45.5</view>
			</view>
			<view class="item">
				<text>有效单数</text>
				<view><text>￥</text>45.5</view>
			</view>
			<view class="item">
				<text>有效佣金</text>
				<view><text>￥</text>45.5</view>
			</view>
		</view>
		<view class="card goodsCard">
			<view class="tagList">
				<text class="active">默认</text>
				<text>价格</text>
				<text>销量</text>
			</view>
			<view class="list">
				<showCaseCard v-for="item in 3" class="showCaseCard" />
			</view>
			<view class="btn">
				管理橱窗
			</view>
		</view>
	</view>
</template>

<script>
	import showCaseCard from '@/components/showCaseCard.vue';
	export default {
		components: {
			showCaseCard
		},
		data() {
			return {

			};
		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: rgba(246, 247, 248, 1);
	}
</style>

<style lang="less" scoped>
	.container {
		.btn {
			height: 112rpx;
			background: rgba(255, 127, 6, 1);
			margin: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}

		.list {
			margin: 0 30rpx;

			.showCaseCard {
				&:last-child {
					border-bottom: 0;
				}
			}
		}

		.goodsCard {
			width: 100%;
			min-height: 894rpx;
			padding: 30rpx 0;

			.tagList {
				display: flex;
				align-items: center;
				margin: 0 30rpx;
				margin-bottom: 45rpx;

				text {
					margin-right: 70rpx;
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(106, 106, 106, 1);
				}

				.active {
					color: rgba(42, 42, 42, 1);
				}
			}
		}

		.showCaseInfo {
			margin: 30rpx;
			display: flex;
			flex-wrap: wrap;

			.item {
				flex: 1 1 30%;
				min-width: 200rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 40rpx;
				line-height: 33.6rpx;

				&:nth-child(n+3) {
					margin-bottom: 0;
				}

				text {
					font-size: 24rpx;
					color: rgba(42, 42, 42, 1);
					margin-bottom: 20rpx;
				}

				view {
					font-size: 40rpx;
					font-weight: 700;
					color: rgba(42, 42, 42, 1);

					text {
						font-size: 24rpx;
					}
				}
			}

		}

		.statusList {
			margin: 0 30rpx;
			padding: 30rpx 0;
			display: flex;
			border-bottom: 1rpx solid rgba(238, 238, 238, 1);

			.item {
				margin-right: 70rpx;
				font-size: 30rpx;
				line-height: 42rpx;
				color: rgba(106, 106, 106, 1);

				&:nth-child(3) {
					margin-right: 140rpx;
				}
			}

			.active {
				font-weight: 700;
				color: rgba(42, 42, 42, 1);
				position: relative;

				&::before {
					position: absolute;
					bottom: -30rpx;
					left: 50%;
					transform: translate(-50%, 0);
					content: '';
					width: 50%;
					height: 6rpx;
					border-radius: 40rpx;
					background: rgba(255, 127, 6, 1);

				}
			}
		}
	}
</style>